<template>
	<view class="indexListWp">
		<view class="indexItem" v-for="(item,index) in indexList" :key="index">
			<view class="top" @click="tapIndexList(item,index)">
				<view :class="actionIndexList==index?'roundAction':'round'">
				</view>
				<view :class="actionIndexList==index?'indexItemTitle':'indexItemTitleAction'">
					{{item.initial}}
				</view>
			</view>
			<view class="listWp">
				<view class="mainWp">
					<view class="line">
						<img src="https://file.casugn.com/storecompcard/temp/line_1654771102963.png" alt="">
					</view>
					<view class="main">
						<view class="mainItem" v-for="(item2,index2) in mainItemList(item.bcCardBuddyInfoVOList)"
							:key="index2">
							<view class="coupon-pick" >
								<u-icon name="checkmark-circle" color="#ff2819" size="50"></u-icon>
							</view>
							
							<!-- <text>{{selectAllCouponCode.indexOf(item2)}}</text> -->
							<img :src="item2.head" alt="" @click="goToDetail(item2)" class='avatarImg'>
							<text class="name">{{item2.name}}</text>
						</view>
						<view class="lastItem" v-if="item.bcCardBuddyInfoVOList.length-3>0"
							@click="showMore(item.bcCardBuddyInfoVOList,index)">
							<view class="numberWp">
								<view class="number">+{{item.bcCardBuddyInfoVOList.length-3}}</view>
								<img src="https://file.casugn.com/storecompcard/temp/bgImg_1654771049960.png" alt=""
									class='bgImg'>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				actionIndex: 0,
				actionIndexList: 0,
				userInfo: {},
				selectAllCouponCode:[],
				shareBottom:false,
				friendList:[]
			}
		},
		props: {
			indexList: {
				Type: Array,
				default: () => [],
				required: true
			}
		},
		onLoad() {
			// this.indexList.forEach(item=>{
			// 	item.bcCardBuddyInfoVOList.map(function(value) {
			// 		value.bOn = false
			// 	})
			// })
			// console.log(this.indexList)
			this.selectAllCouponCode = []
			this.userInfo = JSON.parse(uni.getStorageSync('couponUserListsInfo'))
			console.log(this.userInfo)
		},
		methods: {
			shareClose() {
				this.shareBottom = false
				// this.friendList=[]
				// this.friendSelectShow=true
			},
			tapIndexList(item, index) {
				this.actionIndexList = index
				// console.log('tapIndexList', item);
			},
			// 名片截取前三个其他隐藏
			mainItemList(item) {
				//	 console.log('名片截取前三个其他隐藏',item);
				if (item.length == 0) {
					return []
				}
				if (item.length > 0 && item.length <= 3) {
					return item
				}
				if (item.length > 3) {
					let arr = item.slice(0, 3)
					return arr
				}

			},
			showMore(item, index) {
				console.log('showMore', item, index);
				this.$emit('showMore', item, index)
			},
			// selectCard(item,index){
			// 	console.log("点的整体")
			// 	console.log(item,index)
			// },
			goToDetail(item) {
				if(this.selectAllCouponCode.length == 0){
					this.selectAllCouponCode.push(item)
				} else if( this.selectAllCouponCode.indexOf(item) < 0 ){
					this.selectAllCouponCode.push(item)
				}else{
					// 再次选中删除
					let _index = this.selectAllCouponCode.indexOf(item);
					this.selectAllCouponCode.splice(_index,1)
				}
				// console.log(item)
				console.log(this.selectAllCouponCode)
				this.selectAllCouponCode.map(item=>{
					item.bOn=true
				})
				console.log(this.selectAllCouponCode)
			}
		}
	}
</script>

<style lang="scss">
	.indexListWp {
		.indexItem {

			.top {
				display: flex;
				align-items: center;

				.round {
					width: 21upx;
					height: 21upx;
					border-radius: 50%;
					border: 1px solid #eee;
				}

				.roundAction {
					width: 21upx;
					height: 21upx;
					border-radius: 50%;
					background-color: #5555ff;
					border: 1px solid #423BFE;
				}

				.indexItemTitle {
					margin-left: 30upx;
					font-size: 26upx;
					font-weight: 500;
					color: #423BFE;
				}

				.indexItemTitleAction {
					margin-left: 30upx;
					font-size: 26upx;
					font-weight: 500;
					color: #999999;
				}
			}

			.listWp {
				display: flex;



				.mainWp {
					display: flex;

					.line {
						height: 220upx;
						width: 4upx;
						margin-left: 10upx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.main {
						display: flex;

						.mainItem {
							padding-top: 40upx;
							position: relative;
							display: inline-block;
							text-align: center;
							width: 140upx;
							margin-left: 30upx;
							.coupon-pick {
								position: absolute;
								top: 10upx;
								right: -20upx;
								z-index: 20;
							}
							.avatarImg {
								width: 140upx;
								height: 140upx;
							}

							.name {
								font-size: 24upx;
								font-weight: 400;
								color: #333333;
								line-height: 18upx;
								padding-top: 25upx
							}
						}

						.lastItem {
							margin-left: 30upx;
							height: 140upx;
							width: 140upx;

							.numberWp {
								font-size: 40upx;
								font-weight: 500;
								color: #423BFE;

								.number {
									position: relative;
									top: 90upx;
									left: 35upx;
								}

								.bgImg {
									position: relative;
									width: 140upx;
									height: 140upx;
									top: -10upx;
								}
							}
						}

					}
				}

			}
		}

	}


</style>
